<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.姓名案例_计算属性实现</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    计算属性
        定义：要用的属性不存在，要通过已有属性计算得来
        原理：底层借助了Object.defineProperty方法提供的getter和setter
        get函数什么时候执行？
            1.初次读取时会执行一次
            2.当依赖的数据发生变化时会被再次调用
        优势：与methods实现相比：内部有缓存机制（复用），效率更高，调试方便
        备注：计算属性最终会出现在vm上，直接读取使用即可
             如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
             否则，修改的修改无效，计算属性的值还是之前的

  -->

    <!--  准备好一个容器  -->
    <div id="root">
        姓:<input type="text" v-model="firstName"> <br/>
        名:<input type="text" v-model="lastName"> <br/>
        姓名: <span>{{fullName}}</span>
        姓名: <span>{{fullName}}</span>
        姓名: <span>{{fullName}}</span>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        // data中存放属性
        data: {
            firstName: '呆',
            lastName: '大王'
        },
        // 在computed中写计算属性
        computed: {
            fullName: {
                //get()的作用？当有人读取fullName的时候，就调用get方法，将值返回
                //get()的=什么时候调用？1.初次读取fullName时2.所依赖的数据发生变化时
                get() {
                    console.log("get被调用了")
                    return this.firstName + '-' + this.lastName;
                },
                //set什么时候调用？fullName被修改时
                set(value) {
                    const arr = value.split('-')

                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>
</html>